<template>
  <ConfigGlobal :config="{ locale: 'zh-CN' }">
    <div class="app-container">
      <header class="app-header">
        <div class="logo">
          <h1>EPMS Element</h1>
          <span class="subtitle">组件示例</span>
        </div>
      </header>

      <div class="app-content">
        <aside class="app-sidebar">
          <el-menu router :default-active="activeRoute" class="el-menu-vertical">
            <el-menu-item index="/">
              <el-icon>
                <House />
              </el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/i18n">
                <el-icon>
                  <Document />
                </el-icon>
                <span>国际化</span>
              </el-menu-item>
            <el-sub-menu index="/components">
              <template #title>
                <el-icon>
                  <Grid />
                </el-icon>
                <span>基础组件</span>
              </template>
             
              <el-menu-item index="/components/button">
                <el-icon>
                  <Document />
                </el-icon>
                <span>按钮 Button</span>
              </el-menu-item>

              <el-menu-item index="/components/icon">
                <el-icon>
                  <Document />
                </el-icon>
                <span>图标 Icon</span>
              </el-menu-item>

              <el-menu-item index="/components/card-title">
                <el-icon>
                  <Document />
                </el-icon>
                <span>卡片标题 CardTitle</span>
              </el-menu-item>

              <el-menu-item index="/components/e-search-form">
                <el-icon>
                  <Document />
                </el-icon>
                <span>表单 ESearchForm</span>
              </el-menu-item>

              <el-menu-item index="/components/form">
                <el-icon>
                  <Document />
                </el-icon>
                <span>表单 Form</span>
              </el-menu-item>

              <el-menu-item index="/components/table">
                <el-icon>
                  <Document />
                </el-icon>
                <span>自定义表格 ECustomTable</span>
              </el-menu-item>
              <el-menu-item index="/components/doc-alert">
                <el-icon>
                  <Document />
                </el-icon>
                <span>文档提示 DocAlert</span>
              </el-menu-item>
              <el-menu-item index="/components/diy-editor">
                <el-icon>
                  <Document />
                </el-icon>
                <span>自定义编辑器 DiyEditor</span>
              </el-menu-item>


              <el-menu-item index="/components/search">
                <el-icon>
                  <Document />
                </el-icon>
                <span>搜索 Search</span>
              </el-menu-item>

              <el-menu-item index="/components/input-password">
                <el-icon>
                  <Document />
                </el-icon>
                <span>密码输入 InputPassword</span>
              </el-menu-item>

              <el-menu-item index="/components/pagination">
                <el-icon>
                  <Document />
                </el-icon>
                <span>分页 Pagination</span>
              </el-menu-item>

             

              <el-menu-item index="/components/upload-file">
                <el-icon>
                  <Document />
                </el-icon>
                <span>文件上传 UploadFile</span>
              </el-menu-item>

              <el-menu-item index="/components/cropper">
                <el-icon>
                  <Document />
                </el-icon>
                <span>头像裁剪 Cropper</span>
              </el-menu-item>

              <el-menu-item index="/components/descriptions">
                <el-icon>
                  <Document />
                </el-icon>
                <span>描述列表 Descriptions</span>
              </el-menu-item>

              <el-menu-item index="/components/dict-tag">
                <el-icon>
                  <Document />
                </el-icon>
                <span>字典标签 DictTag</span>
              </el-menu-item>

              <el-menu-item index="/components/editor">
                <el-icon>
                  <Document />
                </el-icon>
                <span>编辑器 Editor</span>
              </el-menu-item>

              <el-menu-item index="/components/summary-card">
                <el-icon>
                  <Document />
                </el-icon>
                <span>汇总卡片 SummaryCard</span>
              </el-menu-item>

              <el-menu-item index="/components/image-viewer">
                <el-icon>
                  <Document />
                </el-icon>
                <span>图片查看器 ImageViewer</span>
              </el-menu-item>

              <el-menu-item index="/components/dynamic-component">
                <el-icon>
                  <Document />
                </el-icon>
                <span>动态组件 DynamicComponent</span>
              </el-menu-item>

              <el-menu-item index="/components/router-search">
                <el-icon>
                  <Document />
                </el-icon>
                <span>路由搜索 RouterSearch</span>
              </el-menu-item>

              <el-menu-item index="/components/echart">
                <el-icon>
                  <Document />
                </el-icon>
                <span>图表 EChart</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/interaction">
              <template #title>
                <el-icon>
                  <Grid />
                </el-icon>
                <span>交互组件</span>
              </template>
             
              <el-menu-item index="/interaction/dialog">
                <el-icon>
                  <Document />
                </el-icon>
                <span>弹框 Dialog</span>
              </el-menu-item>

              <el-menu-item index="/interaction/econfirm-dialog">
                <el-icon>
                  <Document />
                </el-icon>
                <span>确认弹框 EConfirmDialog</span>
              </el-menu-item>

              <el-menu-item index="/interaction/error">
                <el-icon>
                  <Document />
                </el-icon>
                <span>错误页面 Error</span>
              </el-menu-item>
            </el-sub-menu>

          </el-menu>
        </aside>

        <main class="app-main">
          <router-view />
        </main>
      </div>
    </div>
  </ConfigGlobal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { House, Grid, Document, TopRight, Right } from '@element-plus/icons-vue'

const route = useRoute()
const activeRoute = computed(() => route.path)
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.app-header {
  background-color: #ffffff;
  height: 60px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.logo {
  display: flex;
  align-items: baseline;
}

.logo h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #409EFF;
}

.subtitle {
  margin-left: 10px;
  font-size: 14px;
  color: #909399;
}

.app-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-sidebar {
  width: 300px;
  height: 100%;
  background-color: #ffffff;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.el-menu-vertical {
  border-right: none;
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>